<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<!-- START Metadata -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="description" content="KroketWeb levert Raspatat, kroketten, patat en vele meer producten. Bestel nu bij KroketWeb!" />
<meta name="keywords" content="kroketweb, kroket, patat, raspatat, frikandellen, snacks, webshop, cafetaria, snackbar" />
<meta name="robots" content="index, follow" />
<!-- END Metadata -->

<title>Welkom bij KroketWeb - Bestel je vette hap online</title>

<!-- START CSS -->
<link type="text/css" href="css/style.css" rel="stylesheet" />
<!-- END CSS -->

<!-- START Script -->
<script type="text/javascript" src="js/functions.js"></script>
<!-- END Script -->

<%@ page import="java.sql.*"%>
<%@ page import="java.util.HashMap" %>
<%@ page import="java.util.Map.*" %>
</head>

<body onload="calculateTotalCart();">
<div id="header"></div>
<div id="menu">
	<h2>Menu</h2>
	<ul>
		<li><a href="index.html">Home</a></li>
		<li><a href="products.html">Assortiment</a></li>
		<li><a href="search.html">Zoek</a></li>
		<li><a href="cashout.html">Afrekenen</a></li>
	</ul>
</div>
<div id="content">
	<h1>Zoek op product</h1>
	<p>
		<form action="search.html" method="post">
			<c:choose>
				<c:when test="${not empty searchResult}">
					Zoekterm <input type="text" id="searchField" value="${searchTerm}" name="searchTerm" />
				</c:when>
				<c:otherwise>
					Zoekterm <input type="text" id="searchField" value="" name="searchTerm" />
				</c:otherwise>
			</c:choose>
			<input type="submit" value="Zoek" />
		</form>
	</p>
	<c:choose>
		<c:when test="${not empty searchResult}">
			<br />
			<h1>Zoekresultaat</h1>
			<p>Je hebt gezocht op: <span style="font-weight: bold; text-decoration: underline;">${searchTerm}</span><br />
			We hebben de volgende producten gevonden.</p>
			<br />
			<table id="searchResult">
				<thead>
					<tr>
						<th>Product</th>
						<th>Prijs(Euro)</th>
						<th>Op voorraad</th>
						<th></th>
					</tr>
				</thead>
	
				<tbody>
					<c:forEach var="p" items="${searchResult}" varStatus="rowCounter">
						<c:choose>
							<c:when test="${rowCounter.count % 2 == 1}">
								<c:set var="rowStyle" scope="page" value="odd" />
								<c:set var="evenRow" scope="page" value="false"/>
							</c:when>
							<c:otherwise>
								<c:set var="rowStyle" scope="page" value="evenRow" />
								<c:set var="evenRow" scope="page" value="true" />
							</c:otherwise>
						</c:choose>
						<tr>
							<c:choose>
								<c:when test="${p.stock > 0}">
									<td id="product${p.id}" class="${rowStyle} cursorPointer"
										onclick="toggleOrderAmountField(${p.id}, ${evenRow});">${p.name}</td>
									<td id="price${p.id}" class="${rowStyle} cursorPointer"
										onclick="toggleOrderAmountField(${p.id}, ${evenRow});">&euro;
									${p.price}</td>
									<td class="available cursorPointer"
										onclick="toggleOrderAmountField(${p.id}, ${evenRow});">Ja</td>
								</c:when>
								<c:otherwise>
									<td class="${rowStyle}">${p.name}</td>
									<td class="${rowStyle}">&euro; ${p.price}</td>
									<td class="unavailable">Nee</td>
								</c:otherwise>
							</c:choose>
	
							<td id="amountField${p.id}"></td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</c:when>
	</c:choose>
</div>
<div id="sponsors">
	<h2>Sponsors</h2>
	<ul>
		<li><a href="#">Lemia: Vool de lekkelste flietsaus</a></li>
		<li><a href="#">Mola snacks: eerlijk en lekker</a></li>
		<li><a href="#">Sonya Backer: Snacken is gezond</a></li>
	</ul>
</div>
<div id="shoppingCart">
	<h2>Inhoud winkelmandje</h2>
	<table>
				<thead>
					<tr>
						<th>Product</th>
						<th>Prijs</th>
						<th></th>
					</tr>
				</thead>
	
				<tbody id="shoppingCartContent">
					<c:forEach var="product" items="${shoppingCartProducts}">
						<tr>
							<td>(${product.amount}x)${product.name}</td>
							<td class="itemPrice">${product.totalPrice}</td>
							<td><a href="#" onclick="removeItem(${product.id});">X</a></td>
						</tr>
					</c:forEach>
				</tbody>
	
				<tfoot>
					<tr>
						<td>Totaal</td>
						<td id="totalPriceCart">0,00</td>
					</tr>
				</tfoot>
	</table>
</div>
<div class="clearFix"></div>
</body>
</html>